
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="/resource/UserPwoer.tld" prefix="p"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	pageContext.setAttribute("fnId", request.getAttribute("fnId"));
	pageContext.setAttribute("userPwoer", request.getSession().getAttribute("userPwoer"));
%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<LINK rel="Bookmark" href="../images/favicon.ico">
<!-- 本框架基本脚本和样式 -->
<script type="text/javascript"
	src="${path }/resource/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/MBase.js"></script>
<style>
	.user-head {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 5px;
}
	.input-list label{
		width:28%;
	}
	.ml-20{
		margin-left:1%;		
	}
	.mt-20{
		margin-bottom:10px;
	}
	.input-list .form-control {
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    }
    .input-list .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
    width:68%;
	}
	#mgrid>tr>td{
	padding-top: 10px !importer;
	
}
</style>
</head>
<body class="gray-bg">
	<nav class="huiNav">
		<i class="fa fa-home"></i> 首页 <span>&gt;</span>任务中心<span>&gt;</span>任务列表
		<a class="btn btn-info  btn-sm pull-right"
			href="javascript:location.replace(location.href);" title="刷新"><i
			class="fa fa-refresh"></i></a>
	</nav>

	<div class="ibox-content">
		<!-- 搜索框部分start -->
		<p:btn value="serch">
			<form class="form-inline input-list" id="serchform">

				<div class="col-sm-4 col-md-3 col-xs-6 mt-20 ">						
									<label for="exampleInputName2">任务名称</label>
									<div class="form-group ml-20">
											<input class="form-control" name="name" >
									</div>
								</div>
							
								<div class="col-sm-4 col-md-3 col-xs-6 mt-20 ">
									<label for="exampleInputName2">任务类型 </label>	
									<div class="form-group ml-20">											
										<select name="taskType" class="form-control autoFull"
											data-url="${path}/admin/task/showALLTaskType"
											data-filed="name" data-value="name">
											<option value="">--请选择任务类型--</option>
										</select>
									</div>
								</div>
								
								<div class="col-sm-4 col-md-3 col-xs-6 mt-20 ">
									<label for="exampleInputName2">关联项目 </label>
									<div class="form-group ml-20">				
								
											<select id="projId" name="projId" id="projId2" class="form-control autoFull autoFull2" onchange="changeUser()"
												data-url="${path}/admin/project/showListAll"
												data-filed="projName" data-value="id">
												<option value="">--请选择关联项目--</option>
											</select>
									</div>
								</div>
								
								<div class="col-sm-4 col-md-3 col-xs-6 mt-20 ">
									<label for="exampleInputName2">指派人 </label>
									<div class="form-group ml-20">				
											<select class="form-control autoFull autoFull2 select2" 
												name="userId" id="userId"
												data-url="${path}/admin/task/queryAllUser"
												data-value="id" data-filed="name" >
												<option value="">-- 请选择指派人--</option>
											</select>
									</div>
								</div>
								
								<div class="col-sm-4 col-md-3 col-xs-6 mt-20 ">
									<label for="exampleInputName2">状态  </label>
									<div class="form-group ml-20">
											<select class="form-control" name="status"
												>
												<option value="">-- 请选择状态 --</option>
												<option value="未开始">未开始</option>
												<option value="已开始">已开始</option>
												<option value="已完成">已完成</option>
												<option value="已取消">已取消</option>
											</select>
									</div>
								</div>
								
								<div class="col-sm-4 col-md-3 col-xs-6 mt-20 ">
									<label for="exampleInputName2">是否超时</label>
									<div class="form-group ml-20">	
											<select class="form-control" name="isOverTime"
												>
												<option value="">-- 请选择超时状态 --</option>
												<option value="Y">已超时</option>
												<option value="N">未超时</option>
											</select>
									</div>
								</div>
								
								<div class="col-sm-4 col-md-3 col-xs-6 mt-20 ">
									<label for="exampleInputName2">是否评价</label>
									<div class="form-group ml-20">
											<select class="form-control" name="isAssess"
												>
												<option value="">-- 请选择评价状态 --</option>
												<option value="Y">已评价</option>
												<option value="N">未评价</option>
											</select>
									</div>	
								</div>							
								
								<div class="col-sm-4 col-md-3 col-xs-6 mt-20 ">		
									<button  onclick="myGrid.serchData()" type="button" class="btn btn-info btn-sm"><i class="fa fa-search " ></i> 搜索</button>
									<button  type="button" onclick="MForm.reset('#serchform2')" class="btn btn-info btn-sm"><i class="fa fa-refresh " ></i> 重置</button>
								</div>
								<div style="clear:both"></div>
			</form>
		</p:btn>
		<!-- 搜索框部分en -->
		<div class="option-bar">
			<p:btn value="dels">
				<button onclick="myGrid.delItems()" type="button"
					class="btn btn-danger btn-sm">
					<i class="fa fa-trash"></i>批量删除
				</button>
			</p:btn>
			<p:btn value="add">
				<button onclick="openAdd()" type="button"
					class="btn btn-success btn-sm">
					<i class="fa fa-plus"></i> 新增
				</button>
			</p:btn>
		</div>
		<table id="mgrid" class="table table-no-bordered table-striped" data-detail-view="true">
			<thead>
				<tr>
					<!-- <th data-checkbox="true" ></th>
					<th data-formatter="MGrid.indexfn" data-align="center"  data-width="30px" >序号</th> -->
					<th data-field="status" data-formatter="changeStyle">任务状态</th>
					<th data-field="name" data-formatter="buidTitle"><i class="glyphicon glyphicon-star"></i>任务名称</th>
					<th data-field="bugCount" >缺陷数</th>
					<th data-field="createImg" data-formatter="buidCjr" ><i class="fa fa-user"></i> 指派</th> 
					<th data-field="projName">所属项目</th>
					<th data-field="overtime"   data-width="50px" data-formatter="isOverTime">是否超时</th>
					
					<!-- <th data-field="actEndTime" data-formatter="MGrid.getTimeDD"
						data-sortable="true">实际结束时间</th> -->
					<th data-field="assess"  data-width="50px" data-formatter="isNull">评价</th> 
					<th data-align="center" data-width="100px" data-field="id"
						data-formatter="buidOperate">操作</th>
				</tr>
			</thead>
		</table>
	</div>

	<script type="text/javascript">
	
	function buidCjr(value, row, index){
		var html='  <img src="'+value+'" title="'+row.createName+'" class="user-head" />';
			html+=' <i class="fa fa-arrow-circle-right" ></i> <img src="'+row.assignImg+'" title="'+row.assignName+'" class="user-head" />';
		return html ;
	}
	function buidTitle(value, row, index){
		var level=row.level;
		var color='';
			if(level == '1'){
				color = 'danger';
			}else if(level == '2'){
				color = 'warning';
			}else if(level == '3'){
				color = 'success';
			}else if(level == '4'){
				color = 'info';
			}
		var html='  <blockquote class=" text-'+color+'" ><small>'+row.level+'级'+row.taskType +"</small><h3>"+value+'</h3></blockquote>';
		html+="<div> <div class='pull-left'> "+MTools.farmterTime(row.createTime)+"</div><div class='pull-right'>"+MTools.farmterTime(row.endTime)+"</div>";
	    begin=	parseFloat(row.createTime)
	    end =parseFloat(row.endTime);
	    now=new Date().getTime();
	    p=( (now-begin)/(end-begin) ) *100;
	    p=p>100?100:p;
		
		html+='<div class="progress progress-mini clear"> <div style="width: '+p+'%;" class="progress-bar"></div></div>'
		return html;
	}
	
	
		var myGrid;
		$(function(){
			MTools.autoFullSelect();
			//带搜索的下拉框
			$(".select2").select2({'width':'100%'});
			var delUrl="";
			<p:btn value="dels">
				delUrl="${path}/admin/task/del";
			</p:btn>
			 myGrid=MGrid.initGrid({
				 url:"${path}/admin/task/showList",
				 delUrl:delUrl,
				 onExpandRow: function (index, row, $detail) {
				     InitSubTable(index, row, $detail);
				  },
				 sortName: "createTime",
				 sortOrder: "desc"
			 });
		});
		
		function InitSubTable(index, row, $detail){
			var thead = '<thread><tr><th>创建时间</th><th>预计结束时间</th><th>金币数</th><th>故事点数</th><th>评价</th></tr></thread>';
			var cur_table = $detail.html(
					'<table class="table table-hover table-bordered " >' + thead + '</table>').find('table');
			var createTime = getTimeDD(row.createTime);
			var endTime = getTimeDD(row.endTime);
			var assess = row.assess;
			if(assess == "" || assess == 'null' || assess == null){
				assess = '-';
			}
			var html="";
			html +='<tr>'
				+'<td>'+createTime+'</td>'
				+'<td>'+endTime+'</td>'
				+'<td>'+row.goldNum+'</td>'
				+'<td>'+row.experienceNum+'</td>'
				+'<td>'+assess+'</td>'
				+'</tr>';
			cur_table.append(html);
		}
		
		function getTimeDD(time){
			var date = new Date(time);
			return date.getFullYear() + "-" + setFomartZero((date.getMonth() + 1))
			+ "-" + setFomartZero(date.getDate())
		}
		
		function setFomartZero(date){
			if(date<10){
				return "0"+date;
			}
			return date;
		}
		
		function changeUser(){
			var projId = $("#projId").val();
			if(projId!=''){
				$("#userId").removeData("url");
				$("#userId").data("url","${path}/admin/task/queryAllProjUser?projId="+projId);
				$("#userId").data("filed","userName");
				$("#userId").data("value","userId");
				$("#userId").empty();
				$("#userId").append('<option value="">-- 请选择指派人--</option>');
				MTools.autoFullSelect({selecteder:".autoFull2"});
				$(".select2").select2({'width':'100%'})
			}else{
				$("#userId").removeData("url");
				$("#userId").data("url","${path}/admin/task/queryAllUser");
				$("#userId").data("filed","name");
				$("#userId").data("value","userId");
				$("#userId").empty();
				$("#userId").append('<option value="">-- 请选择指派人--</option>');
				MTools.autoFullSelect({selecteder:".autoFull2"});
				$(".select2").select2({'width':'100%'})
			}
			
		}
				
		function buidOperate(value, row, index){
			var html='';
			<p:btn value="look">
			html+='<button class="btn btn-default btn-sm mr-5" onClick="openLook('+value+')"  title="查看"><i class="fa fa-search"></i></buttoun>';
			</p:btn>
			<p:btn value="concern">
			html+='<button class="btn btn-default btn-sm mr-5" onClick="concern('+value+')"  title="关注"><i class="fa fa-star-o"></i></buttoun>';
			</p:btn>
			return html; 
		}
		
		//改变样式		
		function changeStyle(value, row, index){
			var html="";
			if(value == '未开始'){
				html = '<span class="badge badge-info">'+value+'</span>';
			}else if(value == '已开始'){
				html = '<span class="badge badge-success">'+value+'</span>';
			}else if(value == '已完成'){
				html = '<span class="badge badge-warning">'+value+'</span>';
			}else if(value == '已取消'){
				html = '<span class="badge badge-primary">'+value+'</span>';
			}
			return html;
		}
		
		function isNull(value, row, index){
			var html="";
			if(value == "" || value== null){
				html = '<span class="badge">未评价</span>';
			}else{
				html = '<span class="badge badge-warning">已评价</span>';
			}
			return html;
		}
		
		function isOverTime(value, row, index){
			var html="";
			if(value == 0){
				html = '<span class="label label-primary">未超时</span>';
			}else{
				html = '<span class="label label-danger">已超时'+value+'天</span>';
			}
			return html;
		}
		
		//改变任务等级样式		
		function changeLevelStyle(value, row, index){
			var html="";
			if(value == '1'){
				html = '<span class="badge badge-danger">一级任务</span>';
			}else if(value == '2'){
				html = '<span class="badge badge-warning">二级任务</span>';
			}else if(value == '3'){
				html = '<span class="badge badge-success">三级任务</span>';
			}else if(value == '4'){
				html = '<span class="badge badge-info">四级任务</span>';
			}
			return html;
		}
		
		
		//打开查看界面
		<p:btn value="look">
		function openLook(id) {
			layer.full(layer.open({
				type : 2,
				title : "查看任务任务",
				area : [ MUI.SIZE_L, '400px' ],
				maxmin : true,
				content : [ '${path}/admin/task/lookForm?id=' + id]
			}));
		}
		</p:btn>
		
		//打开查看界面
		<p:btn value="concern">
		function concern(id){
			MTools.handleItem(basePath + "/admin/task/concernTask?id=" + id,
					"确认关注该任务？", reflashPaidanTable);						
		}
		</p:btn>
		
		function reflashPaidanTable(){
			myGrid.serchData();
		}
		
	</script>
</body>
</html>
